import React,{useEffect,useState} from 'react';
import {Layout,Carousel} from 'antd';
import axios from 'axios';

const {Content}=Layout

function Serve(props) {
    var [swiperList,setSwiperList]=useState([])
    useEffect(()=>{
        axios.get("/api/swiper").then((res)=>{
            setSwiperList(res.data.list);
        })
    },[])
    return (
        <div className="serve">
            <Layout>
            <Content
                    className="site-layout-background"
                    style={{
                        padding: 24,
                        margin: 0,
                        minHeight: 280,
                    }}
                >
                    <Carousel autoplay>
                        {
                            swiperList.map((item,index)=>{
                                return(
                                    <a href={item.list} key={index}>
                                        <img src={item.img} />
                                    </a>
                                )
                            })
                        }
                    </Carousel>
                    <div className="notices">
                        <div className="title">全场景服务(申请开通请咨询在线客服 或致电 400-666-8888 )</div>
                        <ul className="list">
                            <li>
                                <img src="https://s4.ax1x.com/2021/12/08/oRHx8x.png"/>
                                <p>呼叫系统</p>
                            </li>
                            <li>
                                <img src="https://s4.ax1x.com/2021/12/08/oRHx8x.png"/>
                                <p>在线系统</p>
                            </li>
                            <li>
                                <img src="https://s4.ax1x.com/2021/12/08/oRHx8x.png"/>
                                <p>智能场控</p>
                            </li>
                            <li>
                                <img src="https://s4.ax1x.com/2021/12/08/oRHx8x.png"/>
                                <p>客服知识库</p>
                            </li>
                        </ul>
                    </div>
                </Content>
            </Layout>
        </div>
    );
}

export default Serve;